<!DOCTYPE HTML>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>登录</title>
		<meta charset="utf-8">
		<style type="text/css">
			body {
				background-color: #326696;
				margin: 0px;
				overflow: hidden;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				font-weight: bold;
				text-align:center;
			}
			a {
				color:#0078ff;
			}
			.login{
				width: 335px;
				height: 530px;
				text-align: center;
				margin: 0 auto;
			}
			.box{
				position: fixed;
				top: 70px;
				width: 100%;
				height: 400px;
			}
			.card-title{
				color: #66D9EF;
				font-family: "新宋体";
			}
			.col-form-label{
				float: left;
			}
			.card{
				position: absolute;
				top: -35px;
				height: 500px;
				z-index: 0;
				opacity:0.8;
				filter:alpha(opacity=70);
				/* opacity: 0.4; */
			}
			.face{
				position: relative;
				width: 93px;
				margin: 0 auto;
				z-index: 1;
				/* opacity: 0.4; */
			}
		/*springboot下的路径只对于static,要么使用thyeleaf模板转路径，要么配置springboot的resources.static-locations.classplass属性*/
		</style>
		<link rel="stylesheet" href="webjars/bootstrap/4.4.1/css/bootstrap.min.css">
		<script src="webjars/jquery/3.0.0/jquery.min.js"></script>
		<script src="webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	</head>
	<body>
		<script type="text/javascript" src="/static/js/three.min.js"></script>
		<script type="text/javascript" src="/static/js/Detector.js"></script>
		<script id="vs" type="x-shader/x-vertex">

			varying vec2 vUv;

			void main() {

				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

			}

		</script>

		<script id="fs" type="x-shader/x-fragment">

			uniform sampler2D map;

			uniform vec3 fogColor;
			uniform float fogNear;
			uniform float fogFar;

			varying vec2 vUv;

			void main() {

				float depth = gl_FragCoord.z / gl_FragCoord.w;
				float fogFactor = smoothstep( fogNear, fogFar, depth );

				gl_FragColor = texture2D( map, vUv );
				gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
				gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );

			}

		</script>
		<div class="box">
			<div class="login">
			<img src="/static/img/icon-test.png"  alt="头像" class="face"/>
				<div class="card">
					<br><br>
					<h2 class="card-title">登录</h2>
					<div class="card-body">
						<form th:action="@{../two}" method="post">
							<div class="form-group">
								<label for="username" class="col-form-label">用户名</label>
								<input type="text"
									   class="form-control"
									   id="username"
									   name="username"
									   placeholder="请输入账号"
									   value="admin"/>
							</div>
							<div class="form-group">
								<label for="password" class="col-form-label">密码</label>
								<input type="password"
									   class="form-control"
									   id="password"
									   name="password"
									   placeholder="请输入密码"
									   value="123456"/>
							</div>
							<i class=""></i>
								<div style="width: 70px;height: 20px;top: 5px">
									<input type="checkbox" style="float: left;">
									<p style="float: right;position:relative;top: -7px;height: 14px;">记住我</p>
								</div>
							<div class="form-group">
								<button type="submit" class="btn btn-primary" style="width: 80%;
								-webkit-border-radius: 100px;
								-moz-border-radius: 100px;
								border-radius: 100px;"
									>提交</button>
							</div>
							<p th:text="${msg}"></p>
							<hr>
							<div class="form-group">
								<button type="button" class="btn btn-primary" style="width: 80%;
								-webkit-border-radius: 100px;
								-moz-border-radius: 100px;
								border-radius: 100px;
								background-color: #eccc68;
								border-color: #eccc68;"
									>免费注册</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container;
			var camera, scene, renderer;
			var mesh, geometry, material;

			var mouseX = 0, mouseY = 0;
			var start_time = Date.now();

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				// Bg gradient

				var canvas = document.createElement( 'canvas' );
				canvas.width = 32;
				canvas.height = window.innerHeight;

				var context = canvas.getContext( '2d' );

				var gradient = context.createLinearGradient( 0, 0, 0, canvas.height );
				gradient.addColorStop(0, "#1e4877");
				gradient.addColorStop(0.5, "#4584b4");

				context.fillStyle = gradient;
				context.fillRect(0, 0, canvas.width, canvas.height);

				container.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
				container.style.backgroundSize = '32px 100%';

				//

				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 3000 );
				camera.position.z = 6000;

				scene = new THREE.Scene();

				geometry = new THREE.Geometry();

				var texture = THREE.ImageUtils.loadTexture( '/static/img/cloud10.png', null, animate );
				texture.magFilter = THREE.LinearMipMapLinearFilter;
				texture.minFilter = THREE.LinearMipMapLinearFilter;

				var fog = new THREE.Fog( 0x4584b4, - 100, 3000 );

				material = new THREE.ShaderMaterial( {

					uniforms: {

						"map": { type: "t", value: texture },
						"fogColor" : { type: "c", value: fog.color },
						"fogNear" : { type: "f", value: fog.near },
						"fogFar" : { type: "f", value: fog.far },

					},
					vertexShader: document.getElementById( 'vs' ).textContent,
					fragmentShader: document.getElementById( 'fs' ).textContent,
					depthWrite: false,
					depthTest: false,
					transparent: true

				} );

				var plane = new THREE.Mesh( new THREE.PlaneGeometry( 64, 64 ) );

				for ( var i = 0; i < 8000; i++ ) {

					plane.position.x = Math.random() * 1000 - 500;
					plane.position.y = - Math.random() * Math.random() * 200 - 15;
					plane.position.z = i;
					plane.rotation.z = Math.random() * Math.PI;
					plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;

					THREE.GeometryUtils.merge( geometry, plane );

				}

				mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );

				mesh = new THREE.Mesh( geometry, material );
				mesh.position.z = - 8000;
				scene.add( mesh );

				renderer = new THREE.WebGLRenderer( { antialias: false } );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onDocumentMouseMove( event ) {

				mouseX = ( event.clientX - windowHalfX ) * 0.25;
				mouseY = ( event.clientY - windowHalfY ) * 0.15;

			}

			function onWindowResize( event ) {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );

				position = ( ( Date.now() - start_time ) * 0.03 ) % 8000;

				camera.position.x += ( mouseX - camera.position.x ) * 0.01;
				camera.position.y += ( - mouseY - camera.position.y ) * 0.01;
				camera.position.z = - position + 8000;

				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>
